<html>

<head>
    <meta charset="UTF-8">
    <title>Vue中的条件</title>
    <script src="vue/vue.js"></script>
</head>

<body>
    <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
    </div>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
    <script>
        var app3 = new Vue({
            el: '#app-3',
            data: {
                seen: true,
                type: 'A'
            }
        })
        var app4 = new Vue({
            el: '#app-4',
            data: {
                todos: [{
                    text: '学习 JavaScript'
                }, {
                    text: '学习 Vue'
                }, {
                    text: '整个牛项目'
                }]
            }
        })
    </script>
</body>

</html>
